<div class="form-group clearfix">
  <div class="pull-left form-inline">
    <span style="font-size: 16px;">任务关键词</span>
  </div>
  <div class="pull-right form-inline">
    <button type="button" class="btn btn-success" *ngIf="canVisit" (click)="showAddModal()">新建任务关键词</button>
  </div>
</div>

<div>
  <nz-spin [nzTip]="'正在读取关键词列表...'" [nzSpinning]="_isSpinning" [nzSize]="'large'" class="admin-spin">
    <table class="table">
      <thead>
      <tr>
        <th>ID</th>
        <th>关键词名称</th>
        <th>排序</th>
        <th>是否用户热搜</th>
        <th>创建时间</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of keywordList;">
        <td>{{item.id}}</td>
        <td  style="width:500px;word-break:break-all;">{{item.key}}</td>
        <td>{{item.sort}}</td>
        <td>{{ item.task_search_hot_key ? '是' : '否' }}</td>
        <td>{{item.created_at}}</td>
        <td>
          <a href="javascript:;" *ngIf="!item.task_search_hot_key && canVisit1" (click)="showEditModal(item.id,item.key,item.sort)">编辑</a>
          <a href="javascript:;" *ngIf="canVisit2" (click)="showConfirmModal(item.id)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </nz-spin>
  <div class="text-center">
    <pagination (pageChanged)="pageChanged($event)" [totalItems]="totalItems" [itemsPerPage]="pageSize"
                [(ngModel)]="page"
                [maxSize]="10"
                previousText="&lsaquo;" nextText="&rsaquo;" firstText="&laquo;" lastText="&raquo;"
                [boundaryLinks]="true" class="pagination-sm"></pagination>
  </div>
</div>

<app-notification [type]="type" [message]="message" [isShow]="isShow"
                  (promptIsShow)="isShow = $event;"></app-notification>


<div class="modal fade" bsModal #addModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-xs">
    <form #addForm="ngForm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title pull-left">添加任务关键词</h4>
          <button type="button" class="close pull-right" aria-label="Close"
                  (click)="addModal.hide();">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group clearfix">
            <label class="col-md-2">关键词名称:</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="key" [(ngModel)]="key" required
                     (ngModelChange)="checkName($event)">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">关键词排序:</label>
            <div class="col-md-8">
              <input type="number" class="form-control" name="sort" [(ngModel)]="sort" required
                     (ngModelChange)="checkSort($event)">
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button"
                    (click)="cancel()">取 消
            </button>
            <button class="btn btn-success btn-md-long" type="button"
                    [disabled]="!addForm.form.valid || sortError || nameError"
                    (click)="addKeyWord();">添 加
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>


<div class="modal fade" bsModal #editModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-xs">
    <form #editForm="ngForm">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title pull-left">编辑关键词</h4>
          <button type="button" class="close pull-right" aria-label="Close"
                  (click)="editModal.hide();">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group clearfix">
            <label class="col-md-2">关键词名称:</label>
            <div class="col-md-8">
              <input type="text" class="form-control" name="key" [(ngModel)]="editKey" required
                     (ngModelChange)="checkName($event)">
            </div>
          </div>
          <div class="form-group clearfix">
            <label class="col-md-2">关键词排序:</label>
            <div class="col-md-8">
              <input type="number" class="form-control" name="sort" [(ngModel)]="editSort" required
                     (ngModelChange)="checkSort($event)">
            </div>
          </div>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button"
                    (click)="editCancel()">取 消
            </button>
            <button class="btn btn-success btn-md-long" type="button"
                    [disabled]="!editForm.form.valid || sortError || nameError"
                    (click)="editkeyWord()">修 改
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</div>


<div class="modal fade" bsModal #confirmModal="bs-modal" tabindex="-1">
  <div class="modal-dialog modal-xs">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">温馨提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="confirmModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="form-group clearfix">
          <p>您确定要删除吗？</p>
        </div>
        <form>
          <div class="text-center mt20">
            <button class="btn btn-default btn-md-long" type="button" (click)="confirmModal.hide();">取消</button>
            <button class="btn btn-success btn-md-long" type="submit"
                    (click)="delete()">确定
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
